<template>
	<view class="order-index">
		<u-sticky>
			<view class="order-statistic flex" v-if="filter.uid">
				<view class="order-statistic__item flex" v-for="item in orderStatistic" @click="filter.outer_status=item.value;orderStatusChange()">
					<view class="value flex">{{ item.orders }}</view>
					<view class="key">{{ item.text }}</view>
				</view>
			</view>
			<view class="search-wrap">
				<view class="search-item" v-if="!filter.uid">
					<view class="label">客户手机</view>
					<view class="input-box">
						<uni-easyinput type="number" v-model="filter.mobile" :inputBorder="true" maxlength="11" placeholder="请输入客户手机"></uni-easyinput>
					</view>
				</view>
				<view class="search-item">
					<view class="label">订单状态</view>
					<view class="input-box">
						<uni-data-select
						  v-model="filter.outer_status"
						  :localdata="orderStatus"
						  @change="orderStatusChange"
						></uni-data-select>
					</view>
				</view>
				
				<view class="search-item" v-if="!filter.uid">
					<view class="label"></view>
					<view class="search-footer input-box flex">
						<view class="search">
							<u-button size="small" type="primary" text="搜索" @click="searchCustomer()"></u-button>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="order-list">
			<view class="u-flex" style="padding: 20rpx 0;justify-content: space-between;">
				<view class="u-flex st-item">
					<view class="st-l">订单数量:</view>
					<view class="st-v">{{ orderList.length }}</view>
				</view>
				
				<view class="u-flex st-item">
					<view class="st-l">订单金额:</view>
					<view class="st-v">￥{{ orderAmt }}</view>
				</view>
			</view>
			
			<view class="order-item" v-for="(item,key) in orderList" :key="key">
				<view class="order-item__info flex">
					<view class="title">订单编号</view>
					<view class="value">{{ item.order_no }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">线路名称</view>
					<view class="value">{{ item.route_name }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">规格明细</view>
					<view class="value">{{ item.sku_name }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">出行人数</view>
					<view class="value">
						<u-text :size="32" :text="item.nums" :bold="true"></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">出行日期</view>
					<view class="value">{{ item.date }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">订单日期</view>
					<view class="value">{{ item.create_time }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">联系手机</view>
					<view class="value">{{ item.mobile }}</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">订单金额</view>
					<view class="value">
						<u-text :size="32" color="#ff5a5f" :iconStyle="{color:'#ff5a5f'}" prefixIcon="rmb" :text="item.order_amt" :bold="true"></u-text>
					</view>
				</view>
				<view class="order-item__info flex">
					<view class="title">订单状态</view>
					<view class="value flex">
						<u-text :size="32" color="#dd6161" :text="item.outer_status_display" :show="item.outer_status==0"></u-text>
						<u-text :size="32" color="#f29100" :text="item.outer_status_display" :show="item.outer_status==1"></u-text>
						<u-text :size="32" color="#18b566" :text="item.outer_status_display" :show="item.outer_status==2"></u-text>
						<u-text :size="32" color="#fab6b6" :text="item.outer_status_display" :show="item.outer_status==3"></u-text>
						<u-text :size="32" color="#19be6b" :text="item.outer_status_display" :show="item.outer_status==4"></u-text>
						<u-text :size="32" color="#19be6b" :text="item.outer_status_display" :show="item.outer_status==5"></u-text>	
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadStatus" fontSize="32" :iconSize="32" line />
		
		<u-modal :show="cusRemark" title="添加标注" showCancelButton confirmColor="#ff5a5f" @confirm="submitRemark()" @cancel="cusRemark=false">
			<view class="slot-content">
				<u-form labelPosition="left" :model="remarkForm" labelWidth="140" ref="uForm">
					<u-form-item label="出游偏好" prop="remarkForm.tour_perfer" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.tour_perfer" placeholder="请填写客户出游偏好" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="意向景点" prop="remarkForm.tour_target" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.tour_target" placeholder="请填写客户意向景点" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
					
					<u-form-item label="备注信息" prop="remarkForm.remark" borderBottom>
						<view class="text-area-box">
							<u-textarea v-model="remarkForm.remark" placeholder="请填写客户备注信息" :height="80" autoHeight count></u-textarea>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { getRoutesOrders,getUserOrderStatistic } from '@/api/api.js'
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				orderStatus: [
					{text: '待付款', value: 0}, 
					{text: '待确认', value: 1}, 
					{text: '待出行', value: 2},
					{text: '待评价', value: 3},
					{text: '已评价', value: 4},
					{text: '已定金', value: 5},
				],
				orderStatistic: [
					{text: '待付款', value: 0 , orders: 0}, 
					{text: '待确认', value: 1 , orders: 0}, 
					{text: '待出行', value: 2 , orders: 0},
					{text: '待评价', value: 3 , orders: 0},
					{text: '已评价', value: 4 , orders: 0},
					{text: '已定金', value: 5 , orders: 0},
				],
				currentOuterStatusIndex: 0,
				filter: {
					mobile: '',
					outer_status: '',
					uid: 0,
					sales_admin: 0,
					page: 1,
					limit: 2000
				},
				orderList: [],
				orderAmt: 0,
				cusRemark: false,
				remarkForm: {
					uid: 0,
					tour_perfer: '',
					tour_target: '',
					remark: ''
				}
			}
		},
		methods:{
			searchCustomer() {
				this.initPage()
				this.getCustomerOrders()
			}
			,getCustomerOrders() {
				if ( this.loadStatus == 'nomore' ) {
					return console.log('nomore')
				}
				
				uni.showLoading({
					title: '加载中'
				})
				this.loadStatus = 'loading'
				getRoutesOrders(uni.$lv.object.queryParams(this.filter)).then(res => {
					uni.hideLoading()
					let _result = res.data || []
					if ( !_result.length ) {
						return this.loadStatus = 'nomore'
					}
					this.orderList = uni.$lv.array.union(this.orderList , _result)
					this.loadStatus = 'loadmore'
				})
			}
			,orderStatusChange(evt) {
				this.searchCustomer()
			}
			,initPage() {
				this.loadStatus = 'loadmore'
				this.filter.page = 1
				this.orderList = []
			}
		},
		onLoad(options) {
			// 如果参数中有customerUid说明是普通销售经理
			this.filter.uid = options.customerUid || 0
			// 否则设置为管理员，则要筛选所有数据
			if ( !this.filter.uid ) this.filter.sales_admin = 1
			
			getUserOrderStatistic(uni.$lv.object.queryParams(this.filter)).then(res => {
				this.orderStatistic = res.data
			})
		},
		mounted() {
			this.getCustomerOrders()
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.initPage()
			this.getCustomerOrders()
			uni.stopPullDownRefresh()
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {
			this.filter.page++
			this.getCustomerOrders()
		},
		watch: {
			orderList: function() {
				this.orderAmt = 0
				for(let i=0;i<this.orderList.length;i++) {
					this.orderAmt += this.orderList[i].order_amt
				}
				this.orderAmt = uni.$lv.number.format(this.orderAmt,2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color-grey;
	}
	.st-item {
		.st-l {
			font-size: 28rpx;
			margin-right: 20rpx;
			color: #909399;
		}
		.st-v {
			font-size: 32rpx;
			font-weight: bold;
			color: $uni-color-error;
		}
	}
	.order-index {
		background-color: $uni-bg-color-grey;
		.text-area-box {
			width: 360rpx;
		}
		padding-bottom: 30rpx;
		.order-statistic {
			background-color: #FFFFFF;
			padding: 30rpx;
			justify-content: space-between;
			flex-wrap: wrap;
			
			&__item {
				flex-direction: column;
				align-items: center;
				width: 33%;
				margin-bottom: 20rpx;
				.key {
					font-size: 26rpx;
					color: #909399;
				}
				.value {
					justify-content: center;
					align-items: center;
					font-weight: bold;
					color: $uni-color-error;
					font-size: 42rpx;
					margin-bottom: 0rpx;
				}
			}
		}
		.search-wrap {
			background-color: #FFFFFF;
			padding: 30rpx;
			.search-item {
				@include flex;
				align-items: center;
				.label {
					width: 140rpx;
					color: $u-main-color;
					font-size: 26rpx;
				}
				.input-box {
					flex: 1;
					.amt-input {
						flex: 1;
					}
					.sep {
						font-size: 26rpx;
						color: #999;
						width: 100rpx;
						text-align: center;
					}
				}
				margin-bottom: 20rpx;
			}
			.search-footer {
				margin-top: 30rpx;
				justify-content: end;
				.search {
					width: 160rpx;
				}
			}
		}
		.order-list {
			padding: 30rpx;
			.order-item {
				padding: 30rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				&__info {
					.title{
						font-size: 28rpx;
						margin-right: 20rpx;
						color: #909399;
						width: 130rpx;
						@include flex;
						align-items: center;
					}
					.value {
						font-size: 30rpx;
						color: $u-main-color;
						flex: 1;
					}
				}
				&__info:not(:last-child){margin-bottom: 20rpx;}
			}
			.order-item:not(:last-child){margin-bottom: 40rpx;}
		}
	}
</style>
